import React,{PureComponent} from 'react'
import {Button,StyleSheet,Text,TouchableOpacity, Image,SafeAreaView,View,Dimensions,Modal,SectionList,ListView} from 'react-native'
import ClosableModal  from 'rn-closable-modal'


const {width} = Dimensions.get('window')


type Props = {

}


export default class LoginSexScene extends PureComponent<Props,State> {

    static navigationOptions = {
        header: null,
    };
    constructor(props) {
        super(props);
        this.state = {
            man:require('../../../../res/img/login/login_man_un.png'),
            woman:require('../../../../res/img/login/login_woman_un.png'),
        }
    }
    _man(){
        this.setState({man:require('../../../../res/img/login/login_man.png'),
            woman:require('../../../../res/img/login/login_woman_un.png'),})
    }
    _woman(){
        this.setState({man:require('../../../../res/img/login/login_man_un.png'),
            woman:require('../../../../res/img/login/login_woman.png'),})
    }
        render()
        {
            return (
                <SafeAreaView style={{backgroundColor:'#F9F9F9',flex:1}}>
                    <View style={{justifyContent:'flex-end',flexDirection:'row',
                        marginRight:25,}}>
                        <TouchableOpacity style={styles.register_view} onPress={()=>{}}>
                            <Text style={styles.register_text}>跳过</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.container}>
                        <TouchableOpacity onPress={()=>{this._man()}}>
                            <Image source={this.state.man}/>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={()=>{this._woman()}}>
                            <Image source={this.state.woman}/>
                        </TouchableOpacity>
                    </View>
                    <View style={{marginTop:48,justifyContent:'center',alignItems:"center",flexDirection:'row'}}>
                        <View style={{marginRight:6,width:20,height:5,backgroundColor:'#B7000C',borderRadius:3}}/>
                        <View style={{width:5,height:5,backgroundColor:'#9C9C9C',borderRadius:3}}/>
                    </View>
                    <TouchableOpacity style={styles.login_btn} onPress={()=>{}}>
                        <Text style={{color:'white',fontSize:14,fontWeight:'bold'}}>完成</Text>
                    </TouchableOpacity>
                </SafeAreaView>
            )
        }
    }
const styles = StyleSheet.create({
    backgroundView:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'rgba(0, 0, 0, 0.5)',
    },
    register_view:{
        width:55,
        height:25,
        borderRadius:13,
        backgroundColor:'#999999',
        justifyContent:'center',
        alignItems:'center',
    },
    register_text:{
        color:'white',
        fontWeight:'bold',
        fontSize:12,
    },
    container:{
        borderRadius:3,
        marginTop:100,
        flexDirection:'row',
        justifyContent:'space-around',
    },
    contain_title:{
        color:'black',
        fontSize:16,
        fontWeight:'bold',
        marginTop:30,
    },
    section_flat:{
       marginTop:15,
        marginLeft:28,
        marginBottom:30,
    },
    section_title:{
        color:'rgba(0,0,0,0.8)',
        fontSize:14,
    },
    list:{
        flexDirection: 'row', //这里的属性很重要，可以学习下flex布局
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        justifyContent:'space-around',
        backgroundColor: '#FFFFFF',
        paddingLeft:29,
        paddingTop:15,
        paddingRight:28,
    },
    login_btn:{
        backgroundColor:"#DB3843",
        borderRadius:20,
        height:40,
        width:260,
        borderWidth:1,
        borderColor:'rgba(219, 56, 67, 0.3)',
        marginTop:31,
        justifyContent:'center',
        alignItems:'center',
        alignSelf:'center',
    },


})